<!--
 * @Author: Li Zengkun
 * @Date: 2022-06-30 21:26:11
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-01 21:06:19
 * @Description: 详情模板
-->
<template>
  <div id="aboutUs">
    <!-- 标题 -->
    <div
      v-if="element != null && news == null"
      class="main-content title"
      style="text-align: center; margin-bottom: 60px"
    >
      <h2>{{ element.title }}</h2>
      <p>{{ element.subtitle }}</p>
    </div>

    <!-- 新闻标题 -->
    <div v-if="news != null" class="main-content news_title">
      <h2>{{ news.title }}</h2>
      <p>{{ news.date }}</p>
    </div>

    <!-- 其他内容 -->
    <div class="main-content" v-if="news == null && element != null" ref="content"></div>

    <!-- 新闻内容 -->
    <div class="main-content" style="position: relative" v-if="news != null">
      <div class="news_content" ref="news_content"></div>
      <!-- 其他新闻列表 -->
      <div v-if="news != null" class="list_content">
        <ul class="content_list">
          <li
            id="item_block_1"
            class="item_block wow"
            style="animation-delay: 0.1s; visibility: visible; animation-name: fadeInUp"
            v-if="last_news != null"
          >
            <div class="item_wrapper">
              上一篇：
              <a :href="'#detail?type=news&id=' + last_news.id" target="_blank">
                <div class="item_info">
                  <p class="title ellipsis">{{ last_news.title }}</p>
                  <div class="line"></div>
                  <div class="description">
                    {{ last_news.content }}
                  </div>
                  <p class="subtitle">
                    {{ last_news.date }}
                  </p>
                </div>
              </a>
            </div>
          </li>
          <li
            id="item_block_1"
            class="item_block wow"
            style="animation-delay: 0.1s; visibility: visible; animation-name: fadeInUp"
            v-if="next_news != null"
          >
            <div class="item_wrapper">
              下一篇：
              <a :href="'#detail?type=news&id=' + next_news.id"  target="_blank">
                <div class="item_info">
                  <p class="title ellipsis">{{ next_news.title }}</p>
                  <div class="line"></div>
                  <div class="description">
                    {{ next_news.content }}
                  </div>
                  <p class="subtitle">
                    {{ next_news.date }}
                  </p>
                </div>
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 404 -->
    <div
      v-if="element == null && news == null"
      class="main-content"
      style="text-align:center;user-select:none"
    >
      <img style="height:610px" src="../assets/404.svg" alt="">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: "",
      id: 0,
      element: null,
      news: null,
      last_news:null,
      next_news:null,
    };
  },
  mounted() {
    this.type = this.GetQueryString("type");
    this.id = this.GetQueryString("id");

    // 1. 产品
    if (this.type === "product") {
      this.$axios
        .get("/data.json")
        .then((res) => {
          let el = res.data.products.filter((item) => {
            return item.id == this.id;
          });
          if (el.length > 0) {
            this.element = el[0];
            console.log(el[0]);
            console.log(this.element);
          }
        })
        .then(() => {
          this.$refs.content.innerHTML = this.element.content;
          document.getElementsByTagName("title")[0].innerHTML = this.element.title;
        });
    }

    // 2. 热销产品
    else if (this.type === "hotsell") {
      this.$axios
        .get("/data.json")
        .then((res) => {
          let el = res.data.hotProducts.filter((item) => {
            return item.id == this.id;
          });
          if (el.length > 0) {
            this.element = el[0];
          }
        })
        .then(() => {
          this.$refs.content.innerHTML = this.element.content;
          document.getElementsByTagName("title")[0].innerHTML = this.element.title;
        });
    }

    // 3. 酒店
    else if (this.type === "hotel") {
      this.$axios
        .get("/data.json")
        .then((res) => {
          let el = res.data.hotels.filter((item) => {
            return item.id == this.id;
          });
          if (el.length > 0) {
            this.element = el[0];
          }
        })
        .then(() => {
          this.$refs.content.innerHTML = this.element.content;
          document.getElementsByTagName("title")[0].innerHTML = this.element.title;
        });
    }

    // 4. 新闻
    else if (this.type === "news") {
      this.$axios
        .get("/data.json")
        .then((res) => {
          let news = res.data.news

          let el = news.filter((item) => {
            return item.id == this.id;
          });
          this.last_news = news[news.indexOf(el[0]) - 1]
          this.next_news = news[news.indexOf(el[0]) + 1]
          if (el.length > 0) {
            this.news = el[0];
          }
        })
        .then(() => {
          this.$refs.news_content.innerHTML = this.news.content_html;
          document.getElementsByTagName("title")[0].innerHTML = this.news.title;
        });
    }
  },
  components: {},
};
</script>

<style scoped>
@import "../assets/css/indexPage.css";
.content_list {
  border: #e7e7e7 1px solid;
  border-top: #0072d4 3px solid;
}
.content_list li {
  width: calc(100% - 40px);
  padding: 30px 20px 0px 20px;
  margin-bottom: 0;
  margin-right: 0;
  position: relative;
}
.content_list li .title {
  margin-top: 0;
  font-size: 15px;
  color: #262626;
  transition: all 0.3s linear;
}

.content_list li .item_wrapper {
  /* height: 108px; */
  padding: 0;
  border-bottom: #e7e7e7 1px solid;
  height: auto;
}
.content_list li .item_wrapper .subtitle {
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 40px;
  font-size: 12px;
  color: #8f8f8f;
  height: 40px;
}
.content_list li .item_info .description {
  font-size: 12px;
  color: #8f8f8f;
  line-height: 20px;
  height: 40px;
  overflow: hidden;
}

.news_title {
  text-align: left;
  margin: 60px auto;
}
.news_title h2 {
  font-size: 18px;
  color: #3c3c3c;
  font-weight: 500;
}
.news_title p {
  font-size: 12px;
  color: #101010;
}

#aboutUs {
  font-size: 13px;
  line-height: 24px;
  color: #7e7e7e;
  /* overflow: auto; */
  height: auto;
}
#aboutUs .main-content {
  text-align: left;
}
.list_content {
  width: 400px;
  position: fixed;
  top: 200px;
  margin-left: 770px;
  padding-left: 40px;
  box-sizing: border-box;
  z-index: 99;
}
.news_content {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 770px;
  left: 0;
}
hr {
  border: none;
  border-top: 1px dotted #d3d3d3;
  margin-top: 10px;
  margin-bottom: 10px;
  word-wrap: break-word;
  word-break: normal;
}
.subtitle {
  text-align: left;
  margin-top: 20px;
  margin-bottom: 20px;
}
#banner {
  height: 400px;
  background-image: url("../assets/companyInfoBg.jpg");
  background-position: center;
}

.container_content {
  padding-top: 0;
  margin: 20px 0 120px 0;
}
.postbody {
  position: relative;
  z-index: 0;
}
</style>
